<template>
    <scroll-view class="scroll-view" scroll-y="true" @scrolltolower="scrolltolower">
        <view class="yue">
            <view class="yue-top">
                <view class="yue-left" @click="switchTab(0)">
                    <view class="">营业额</view>
                    <view v-show="border == 0" class="border"></view>
                </view>
				<picker cancel="" mode="date" :value="dateMonth" fields="month" @change="bindDateChange">
					<view class="yue-left">
						<view class="">{{dateMonth}}</view>
						<!-- <view v-show="border == 1" class="border"></view> -->
					</view>
				</picker>
            </view>
            <view v-show="border == 0" class="box-yue1">
                <view class="box-list1" v-for="it in dataList">
                    <view class="list1-left">
                        <view>商品1营业额</view>
                        <view class="sj">2024-08-12 14:20:50</view>
                    </view>
                    <view class="list1-right">+20</view>
                </view>
            </view>
        </view>
    </scroll-view>
</template>

<script setup>
import { ref } from 'vue';
	import { user,shopTurnover } from '@/api/index.js';
	import { utils } from '@/utils/utils.js';
	import { onLoad, onShow } from '@dcloudio/uni-app';

const dataList = ref([])
const limit = ref(10)
const page = ref(0)
const last_page = ref(1)
const border = ref(0); //0营业额 1月积分
const selMonth = ref('')
const current_page = ref(0)
const switchTab = (value) => {
    border.value = value;
};
const scrolltolower = () => {
    console.log('滚动到底部');
};
onShow(() => {
	getMonth()
});
const dateMonth = ref('')
const getList = async()=>{
	const ret = await shopTurnover({page:page.value,limit:limit.value,query_time:selMonth.value});
	if (ret.code == 1) {
		console.log(ret)
		last_page.value = ret.data.last_page
		current_page.value = ret.data.current_page
		dataList.value = dataList.value.concat(ret.data.data)
	} else {
		utils('数据加载失败！');
	}
}
const getMonth = async () => {
		let date = new Date();
		let month = date.getMonth() + 1;
		let year = date.getFullYear()
		let lastDay = new Date(year, month, 0).getDate();
		page.value = 1
		dateMonth.value = `${year}年${month}月`
		selMonth.value = `${year}-${month}-01 - ${year}-${month}-${lastDay}`
		dataList.value = []
		getList(selMonth.value)
		
	}
	const bindDateChange = (e) => {
		console.log(e)
		let d = e.detail.value.split('-')
		dateMonth.value = `${d[0]}年${d[1]}月`
		page.value = 1
		let lastDay = new Date(d[0], d[1], 0).getDate();
		selMonth.value = `${d[0]}-${d[1]}-01 - ${d[0]}-${d[1]}-${lastDay}`
		dataList.value = []
		getList(selMonth.value)
	}
</script>

<style lang="scss" scoped>
.scroll-view {
    height: 100vh;
}
.yue {
    .box-yue1 {
        .box-list1 {
            .list1-right1 {
                font-size: 28rpx;
                color: #f8bb4f;
            }
            .list1-right {
                color: #f8bb4f;
                font-size: 48rpx;
            }
            .sj {
                color: #999999;
                font-size: 24rpx;
                margin-top: 16rpx;
            }
            &:last-child {
                border: none;
            }
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 152rpx;
            border-bottom: solid #f5f5f5 2rpx;
            color: #333333;
            font-size: 28rpx;
        }
        padding: 0 38rpx 0 34rpx;
    }
    .yue-top {
        .yue-left {
            justify-content: center;
            align-items: center;
            display: flex;
            flex-direction: column;
            .border {
                width: 40rpx;
                height: 4rpx;
                background: #ff9b29;
                margin-top: 3px;
            }
        }
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100rpx;
        padding: 0 144rpx;
        border-bottom: solid 20rpx #f7f7f7;
    }
}
</style>
